<template>
  <view
    class="navbar"
    :style="{
      height: isHeight ? statusBarHeight + 44 + 'px' : '',
    }"
  >
    <view class="navbar-fixed">
      <view
        class="navbar-status"
        :style="{
          height: statusBarHeight + 'px',
          'background-color': isOpacity
            ? `rgba(255,255,255,${opacity})`
            : bgColor,
        }"
      >
      </view>

      <view
        class="navbar-content center"
        :style="{
          height: 44 + 'px',
          'background-color': isOpacity
            ? `rgba(255,255,255,${opacity})`
            : bgColor,
        }"
      >
        <view class="navbar-content-left center">
          <slot name="left"></slot>
        </view>

        <view class="navbar-content-title" :style="{'color':titleColor}">
          {{ title }}
        </view>
		<view class="navbar-content-right center">
		  <slot name="right"></slot>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "NavBar",
  props: {
    title: {
      type: String,
      default: "",
    },
    bgColor: {
      type: String,
      default: "#fff",
    },
    isOpacity: {
      type: [String, Boolean],
      default: false,
    },
    opacity: {
      type: [String, Number],
      default: 0,
    },
    titleColor: {
      type:  String,
      default: '#333'
    },
    isHeight: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
    };
  },
};
</script>

<style lang="scss" scoped>
@function px2rpx($px) {
  @return 750 * $px / $widths * 1rpx;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  position: relative;

  &-fixed {
    z-index: 9999;
    position: fixed;
    width: 100vw;
    left:0;
  }

  &-content {
    position: relative;

    &-left {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      // margin-left: px2rpx(35px);

      // font-size: px2rpx(35px);
      color: #333;
    }

    &-title {
      // font-size: px2rpx(52px);
      font-weight: 700;
    }
	&-right {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	
	  // margin-left: px2rpx(35px);
	
	  // font-size: px2rpx(35px);
	  color: #333;
	}
	
  }
}
.navbar-content-title{
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
